<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit8</title>
    <!-- 引入动画库 -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- 引入bootstrap的样式 -->
    <link rel="stylesheet" href="bootstrap-3.4.1/dist/css/bootstrap.min.css">

    <!-- 引入swiper的样式 -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

    <!-- 引入重置样式 -->
    <link rel="stylesheet/less" href="css/reset.less">

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="css/common.less">

    <!-- 引入页面独立样式 -->
    <link rel="stylesheet/less" href="css/index.less">
</head>
<body>
<header id="header">
    <!-- bootstrap的导航 -->
    <nav class="navbar navbar-inverse">
        <div class="container">
            <!-- logo以及移动端显示 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- logo -->
                <a class="navbar-brand" href="#">spirit8</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">home</a></li>
                    <li><a href="#about">about</a></li>
                    <li><a href="#team">team</a></li>
                    <li><a href="#services">services</a></li>
                    <li><a href="#clients">clients</a></li>
                    <li><a href="#work">work</a></li>
                    <li><a href="#testimonials">testimonials</a></li>
                    <li><a href="#contact">contact</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>

<div id="banner">
    <h3>Welcome to <span>spirit8</span></h3>
    <h4>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></h4>
    <a href="#about" class="arrow">
        <img src="images/arrow.png" alt="">
    </a>
</div>

<div id="about">
    <div class="about-box">
        <div class="left">
            <img src="images/about-background.png" alt="">
        </div>
        <div class="right">
            <div class="small-title">ABOUT US</div>
            <div class="title">Some words <span>about us</span></div>
            <div class="line"></div>
            <div class="content">
                We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                illustration, we brand companies in a way they will never forget.
            </div>
            <div class="list">
                <div class="item">
                    <img src="images/icon16.png" alt="">
                    <div class="content">
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </div>
                </div>
                <div class="item">
                    <img src="images/icon16.png" alt="">
                    <div class="content">
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </div>
                </div>
                <div class="item">
                    <img src="images/icon16.png" alt="">
                    <div class="content">
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </div>
                </div>
            </div>
            <div class="btn">
                <img src="images/about-btn.png" alt="">
                <span>Browse our work</span>
            </div>
        </div>
    </div>
</div>

<div id="team">
    <h3>Meet <span>our team</span></h3>
    <div class="line"></div>
    <div class="small-line"></div>

    <div class="swiper team-swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="list">
                    <div class="item animated fadeInLeft wow" data-wow-delay=".5s">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item animated fadeInLeft wow" data-wow-delay=".2s">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                    <div class="item animated fadeInRight wow" data-wow-delay=".2s">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                    <div class="item animated fadeInRight wow" data-wow-delay=".5s">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="list">
                    <div class="item">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                    <div class="item">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                    <div class="item">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="list">
                    <div class="item">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                    <div class="item">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                    <div class="item">
                        <img src="images/avatar.png" alt="">
                        <div class="name">
                            <p>Jason Statham</p>
                            <p>Knife designer</p>
                        </div>
                        <div class="content">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</div>

<div id="services">
    <div class="services-box">
        <div class="title">
            TAKE A LOOK <span>AT OUR SERVICES</span>
        </div>
        <div class="line"></div>
        <div class="small-line"></div>
        <div class="content">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good
            and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
            the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
            1.10.32.
        </div>
        <div class="list">
            <div class="features">
                <img src="images/pc.png" alt="">
                <h2>WEB DESIGN</h2>
                <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                    1.10.32.</p>
            </div>
            <div class="features">
                <img src="images/phone.png" alt="">
                <h2>MOBILE APPS</h2>
                <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                    1.10.32.</p>
            </div>
            <div class="features">
                <img src="images/photography.png" alt="">
                <h2>PHOTOGRAPHY</h2>
                <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                    1.10.32.</p>
            </div>
            <div class="features">
                <img src="images/marketing.png" alt="">
                <h2>MARKETING</h2>
                <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                    1.10.32.</p>
            </div>
        </div>
    </div>

</div>

<div id="clients">
    <div class="clients-box">
        <h3>SOME OF <span>OUR CLIENTS</span></h3>
        <div class="line"></div>
        <div class="small-line"></div>
        <div class="swiper team-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <img src="images/logo1.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo2.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo3.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo4.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo5.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <img src="images/logo1.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo2.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo3.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo4.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo5.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <img src="images/logo1.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo2.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo3.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo4.png" alt="">
                        </div>
                        <div class="item">
                            <img src="images/logo5.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>

<div id="work">
    <div class="work-box">
        <div class="title">
            TAKE A LOOK AT <span>OUR WORK</span>
        </div>
        <div class="line"></div>
        <div class="small-line"></div>
        <div class="content">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good
            and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
            the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
            1.10.32.
        </div>
        <div class="pic-box">
            <div class="type-nav">
                <div class="type-title">Filter by type</div>
                <div class="type-list">
                    <a href="" class="active">All</a>
                    <div class="type-line">|</div>
                    <a href="">Web design</a>
                    <div class="type-line">|</div>
                    <a href="">Mobile design</a>
                    <div class="type-line">|</div>
                    <a href="">Photography</a>
                </div>
                <div class="type-mobile">
                    <!--                    <label>-->
                    <!--                        <select>-->
                    <!--                            <option value="volvo">All</option>-->
                    <!--                            <option value="saab">Web design</option>-->
                    <!--                            <option value="mercedes">Mobile design</option>-->
                    <!--                            <option value="audi">Photography</option>-->
                    <!--                        </select>-->
                    <!--                    </label>-->
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="">All</a></li>
                            <li><a href="">Web design</a></li>
                            <li><a href="">Mobile design</a></li>
                            <li><a href="">Photography</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="list">
                <a href="" class="pic">
                    <img src="images/pic1.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic1.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic1.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a class="pic">
                    <img src="images/pic1.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic2.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic2.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic2.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic2.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic3.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic3.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic3.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
                <a href="" class="pic">
                    <img src="images/pic3.png" alt="">
                    <div class="content">
                        <h2>Trend and fashion</h2>
                        <p>Website design</p>
                        <img src="images/pic-add.png" alt="">
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<div id="testimonials">
    <div class="testimonials-box">
        <h3><span>our clients’</span> testimonials</h3>
        <div class="line"></div>
        <div class="small-line"></div>
        <div class="swiper team-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="content">This book is a treatise on the theory of ethics, very popular during
                                the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                                from a line in section 1.10.32.
                            </div>
                            <p>Dean Martin, <span>CEO Acme Inc.</span></p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="content">This book is a treatise on the theory of ethics, very popular during
                                the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                                from a line in section 1.10.32.
                            </div>
                            <p><span>Dean Martin,</span> CEO Acme Inc.</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="content">This book is a treatise on the theory of ethics, very popular during
                                the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                                from a line in section 1.10.32.
                            </div>
                            <p><span>Dean Martin,</span> CEO Acme Inc.</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>

<div id="contact">
    <div class="contact-box">
        <div class="title">
            feel free to <span>contact us</span>
        </div>
        <div class="line"></div>
        <div class="small-line"></div>
        <div class="content">
            Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good
            and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during
            the Renaissance.
        </div>
        <form class="contact-input" method="post" action="">
            <div class="top">
                <div class="name-box">
                    <label for="name">Name <span>*</span></label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="name" required>
                    </div>
                </div>
                <div class="email-box">
                    <label for="email">Email Address <span>*</span></label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="email" required>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <label for="message">Message <span>*</span></label>
                <div class="input-group">
                    <textarea class="form-control" id="message" required wrap="soft"></textarea>
                </div>
            </div>
            <div class="button">
                <button>SEND</button>
            </div>
        </form>
    </div>
</div>

<footer id="footer">
    <div class="footer-box">
        <div class="copyright">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></div>
        <div class="copyright-icon">
            <a href=""><img src="images/facebook.png" alt=""></a>
            <a href=""><img src="images/twitter.png" alt=""></a>
            <a href=""><img src="images/google.png" alt=""></a>
            <a href=""><img src="images/linkedin.png" alt=""></a>
            <a href=""><img src="images/dribbble.png" alt=""></a>
        </div>
    </div>
</footer>
</body>
</html>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/less.js"></script>
<script src="js/wow.min.repeat.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<script>
    // 实例化WOW
    new WOW().init();

    const swiper = new Swiper('.team-swiper', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        }
    });
</script>